<template>
	<view>
		<view class="pore" style="z-index: 999;">
			<u-navbar v-if="type==0" title="小石团购" bgColor="transparent" @leftClick="leftBack">
			</u-navbar>
			<u-navbar v-if="type==1" title="车主服务" bgColor="transparent" @leftClick="leftBack">
			</u-navbar>
			<u-navbar v-if="type==2" title="超值秒杀" bgColor="transparent" @leftClick="leftBack">
			</u-navbar>
		</view>
		<view class="uni-margin-wrap pore">
			<image :src="api_host + ban.imageUrl" mode="widthFix" class="width100"></image>
			<view class="ban-logo mt60">
				<view class="c343 f46">{{ban.title}}</view>
				<view class="c343 f46">{{ban.synopsis}}</view>
			</view>
		</view>
		<view class="ml30 mr30 content-box pore">
			<view>
				<view class="bgFff p10 radius50 flex-jus" @click="nologinJump('/pages/search/index?type=wan')">
					<u-search placeholder="输入你要找的团购商品" disabled v-model="keyword" clearabled bgColor="#fff"
						:showAction="false"></u-search>
					<view>
						<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','padding':'0 40rpx'}"
							shape="circle">搜索</u-button>
					</view>
				</view>
				<view class="mt20 flex-jus">
					<view class="boxone flex-cen" @click="tab(1)">
						<text class="mr20 f26 textoverflow">{{title1}}</text>
						<!-- <image v-if="activeType==1" src="../static/images/tag.png" style="width: 32rpx;height: 32rpx;">
						</image> -->
						<image src="../static/images/down.png" style="width: 32rpx;height: 32rpx;"></image>
					</view>
					<view class="boxone flex-cen" @click="tab(2)">
						<!-- <image v-if="activeType==2" src="../static/images/addresson.png"
							style="width: 32rpx;height: 32rpx;"></image> -->
						<image src="../static/images/address2.png" style="width: 32rpx;height: 32rpx;flex: 0 0 32rpx;">
						</image>
						<text class="mr20 ml10 f26 textoverflow">{{title2}}</text>
						<!-- <image v-if="activeType==2" src="../static/images/tag.png" style="width: 32rpx;height: 32rpx;">
						</image> -->
						<image src="../static/images/down.png" style="width: 32rpx;height: 32rpx;flex: 0 0 32rpx;"></image>
					</view>
					<view class="boxone flex-cen" @click="tab(3)">
						<text class="mr20 f26 textoverflow">{{title3}}</text>
						<!-- <image v-if="activeType==3" src="../static/images/tag.png" style="width: 32rpx;height: 32rpx;">
						</image> -->
						<image src="../static/images/down.png" style="width: 32rpx;height: 32rpx;flex: 0 0 32rpx;"></image>
					</view>
				</view>
				<!-- <view v-if="activeType==1" class="mt20" style="display: flex;">
					<view class="left">
						<view v-for="(item,index) in leftList" :key="index">
							<p class="item_box" :class="item.remark==1?'active_left':''" @click="leftClick(item)">
								{{item.kindName}}
							</p>
						</view>
					</view>
					<view class="right">
						<view class="item_box" :class="item.remark==1?'active_right':''"
							v-for="(item,index) in rightList" :key="index" @click="rightClick(item)">
							<p>{{item.kindName}}</p>
							<image v-if="item.remark==1" src="../static/images/gou.png"
								style="width: 32rpx;height: 32rpx;">
							</image>
						</view>
					</view>
				</view>
				<view v-if="activeType==2" class="mt20" style="display: flex;">
					<view class="left">
						<view v-for="(item,index) in leftList2" :key="index">
							<p class="item_box" :class="item.remark==1?'active_left':''" @click="leftClick2(item)">
								{{item.kindName}}
							</p>
						</view>
					</view>
					<view class="right">
						<view class="item_box" :class="item.remark==1?'active_right':''"
							v-for="(item,index) in rightList2" :key="index" @click="rightClick2(item)">
							<p>{{item.kindName}}</p>
							<image v-if="item.remark==1" src="../static/images/gou.png"
								style="width: 32rpx;height: 32rpx;">
							</image>
						</view>
					</view>
				</view>
				<view v-if="activeType==3" class="mt20" style="display: flex;">
					<view style="width: 100%;">
						<view class="item_box" :class="item.choose==1?'active_right':''"
							v-for="(item,index) in sortList" :key="index" @click="sortClick(item)">
							<p>{{item.title}}</p>
							<image v-if="item.choose==1" src="../static/images/gou.png"
								style="width: 32rpx;height: 32rpx;">
							</image>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 商品列表 -->
			<view class="tuangou" @click="togroupdetail(item.id)" v-for="(item,index) in shoppingList" :key="index">
				<view style="display: flex;flex-direction: column;">
					<image :src="api_host+item.icon"
						style="width: 227rpx;height: 227rpx;border-radius: 15rpx;z-index: 99;">
					</image>
					<view class="ms_djs flex f24" v-if="item.goodsSeckill">
						<view class="mt10 ml10" style="color: #78768A;">距结束</view>
						<view class="f24 mt10">
							<count-down :times="item.goodsSeckill.downTimes"></count-down>
						</view>
					</view>
				</view>
				<image src="../static/images/qwbj.png"
					style="width: 120rpx;height: 40rpx;position: absolute;top: 30rpx;left: 30rpx;z-index: 100;"></image>
				<view class="flex1">
					<view class="sub-title" >
						<text class="f32 fw500">{{item.brand}} | {{item.goodName}}
						</text>
					</view>
					<view class="f24 mt30 ml20 c999">{{item.distance/1000}}km {{item.goodName}}</view>
					<view class="f24 ml20 mt10 flex flex-wrap">
						<view class="mr10 mb10" v-for="(item2,index2) in item.tags" :key="index2">
							<u-tag shape="circle" size="mini" color="#34314F" bgColor="#f7f7f7" :text="item2"
								borderColor="#f7f7f7"></u-tag>
						</view>
					</view>
					<view class="box_bot flex-jus ml20">
						<view class="ml20">
							<view>
								<span class="cff7 f28">￥</span>
								<span class="cff7 f36 fw500" v-if="item.goodsSeckill">{{item.goodsSeckill.price}}</span>
								<span class="cff7 f36 fw500" v-else>{{item.salePrice}}</span>
								<span style="text-decoration: line-through"
									class="f24 ml10 c999">￥{{item.originalPrice}}</span>
							</view>
							<view class="f24 flex cff7">
								<image src="../static/images/lisheng.png" style="width: 24rpx;height: 24rpx;">
								</image>
								<text
									v-if="item.goodsSeckill">立省￥{{(item.originalPrice - item.goodsSeckill.price) | toFixed2}}</text>
								<text v-else>立省￥{{(item.originalPrice - item.salePrice) | toFixed2}}</text>
								<text class="ml10">已售{{item.saleVolume}}</text>
							</view>
						</view>
						<view class="box_bot_right flex-cen">
							<image src="../static/images/box_bg.png"
								style="width: 130rpx;height: 110rpx;position: absolute;right: 0;"></image>
							<image src="../static/images/qiang.png" class="mr10"
								style="width: 42rpx;height: 50rpx;z-index: 99;">
							</image>
							<image class="mr10" src="../static/images/right.png" mode="widthFix"
								style="width: 28rpx;z-index: 99;">
							</image>
						</view>
					</view>
				</view>
			</view>

			<u-gap height="20"></u-gap>
		</view>

		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>

		<u-popup :show="show" mode="top" @close="close" bgColor="#F4F4F4" :round="16" duration="0">
			<view class="contentbox">
				<view class="content-box pore mt30">
					<image src="../static/images/bannerbg.png" mode="widthFix" class="width100"></image>
					<!-- <view class="textC pb20"
						style="position: absolute;left: 50%;transform: translateX(-50%);top:160rpx">小石团购</view> -->
					<u-navbar v-if="type==0" title="小石团购" bgColor="transparent" @leftClick="leftBack">
					</u-navbar>
					<u-navbar v-if="type==1" title="车主服务" bgColor="transparent" @leftClick="leftBack">
					</u-navbar>
					<u-navbar v-if="type==2" title="超值秒杀" bgColor="transparent" @leftClick="leftBack">
					</u-navbar>
					<view class="bgFff p10 radius50 flex-jus ml30 mr30 mt20"
						@click="nologinJump('/pages/search/index?type=wan')">
						<u-search placeholder="输入你要找的团购商品" disabled v-model="keyword" clearabled bgColor="#fff"
							:showAction="false"></u-search>
						<view>
							<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','padding':'0 40rpx'}"
								shape="circle">搜索</u-button>
						</view>
					</view>
					<view class="mt20 ml30 mr30 flex-jus">
						<view class="boxone flex-cen" :class="activeType==1? 'active_boxone':''" @click="tab(1)">
							<text class="mr20 f26 textoverflow">{{title1}}</text>
							<image v-if="activeType==1" src="../static/images/tag.png"
								style="width: 32rpx;height: 32rpx;"></image>
							<image v-else src="../static/images/down.png" style="width: 32rpx;height: 32rpx;flex: 0 0 32rpx;">
							</image>
						</view>
						<view class="boxone flex-cen" :class="activeType==2? 'active_boxone':''" @click="tab(2)">
							<image v-if="activeType==2" src="../static/images/addresson.png"
								style="width: 32rpx;height: 32rpx; flex: 0 0 32rpx;"></image>
							<image v-else src="../static/images/address2.png" style="width: 32rpx;height: 32rpx;flex: 0 0 32rpx;">
							</image>
							<text class="mr20 ml10 f26 textoverflow">{{title2}}</text>
							<image v-if="activeType==2" src="../static/images/tag.png"
								style="width: 32rpx;height: 32rpx;"></image>
							<image v-else src="../static/images/down.png" style="width: 32rpx;height: 32rpx;flex: 0 0 32rpx;">
							</image>
						</view>
						<view class="boxone flex-cen" :class="activeType==3? 'active_boxone':''" @click="tab(3)">
							<text class="mr20 f26 textoverflow">{{title3}}</text>
							<image v-if="activeType==3" src="../static/images/tag.png"
								style="width: 32rpx;height: 32rpx;"></image>
							<image v-else src="../static/images/down.png" style="width: 32rpx;height: 32rpx;flex: 0 0 32rpx;">
							</image>
						</view>
					</view>
					<view v-if="activeType==1" class="mt20" style="display: flex;">
						<view class="left">
							<view v-for="(item,index) in leftList" :key="index"
								:class="item.remark==1?'active_left2':''">
								<p class="item_box textoverflow" :class="item.remark==1?'active_left':''" @click="leftClick(item)">
									{{item.kindName}}
								</p>
							</view>
						</view>
						<view class="right">
							<view class="item_box" :class="item.remark==1?'active_right':''"
								v-for="(item,index) in rightList" :key="index" @click="rightClick(item)">
								<p>{{item.kindName}}</p>
								<image v-if="item.remark==1" src="../static/images/gou.png"
									style="width: 32rpx;height: 32rpx;"></image>
							</view>
						</view>
					</view>
					<view v-if="activeType==2" class="mt20" style="display: flex;">
						<view class="left">
							<view v-for="(item,index) in leftList2" :key="index"
								:class="item.remark==1?'active_left2':''">
								<p class="item_box textoverflow" :class="item.remark==1?'active_left':''" @click="leftClick2(item)">
									{{item.kindName}}
								</p>
							</view>
						</view>
						<view class="right">
							<view class="item_box" :class="item.remark==1?'active_right':''"
								v-for="(item,index) in rightList2" :key="index" @click="rightClick2(item)">
								<p>{{item.kindName}}</p>
								<image v-if="item.remark==1" src="../static/images/gou.png"
									style="width: 32rpx;height: 32rpx;"></image>
							</view>
						</view>
					</view>
					<view v-if="activeType==3" class="mt20" style="display: flex;">
						<view style="width: 100%;">
							<view class="item_box textoverflow" style="padding-right: 30rpx;"
								:class="item.choose==1?'active_right':''" v-for="(item,index) in sortList" :key="index"
								@click="sortClick(item)">
								<p>{{item.title}}</p>
								<image v-if="item.choose==1" src="../static/images/gou.png"
									style="width: 32rpx;height: 32rpx;"></image>
							</view>
						</view>
					</view>
					<view class="bottomsafe" v-if="activeType!=3">
						<view class="safe_left"></view>
						<view class="safe_right"></view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import waterfallFlow from '@/components/waterfall-flow/index.vue'
	import countDown from '@/components/countDown/index.vue'
	// import {
	// 	getWanhome,
	// 	getWanlist
	// } from '@/common/api_wan.js'
	import {
		getGoodsList,
		getGoodsListbytype,
		getAddrTree
	} from '@/common/api_tuangou.js'
	import {
		getBanners
	} from '@/common/api_user.js'
	import {
		getNowFormatDate
	} from '@/common/utils.js'
	export default {
		components: {
			waterfallFlow,
			countDown
		},
		name: '',
		data() {
			return {
				scrollTop: 0,
				ban: {},
				keyword: '',
				nav_id: '',
				menuList: [],
				listData: [],
				pageNum: 1,
				lastPage: false,
				show: false,
				activeType: 0,
				leftList: [{
					kindName: '全部',
					remark: 1,
				}, ],
				leftList2: [{
						kindName: '附近',
						remark: 1,
						children: [{
								kindName: '附近',
								remark: 1,
								id: ''
							},
							// {
							// 	kindName: '500m',
							// 	remark: 0,
							// 	id: 500
							// },
							// {
							// 	kindName: '1km',
							// 	remark: 0,
							// 	id: 1000
							// },
							// {
							// 	kindName: '3km',
							// 	remark: 0,
							// 	id: 3000
							// },
							// {
							// 	kindName: '5km',
							// 	remark: 0,
							// 	id: 5000
							// },
							// {
							// 	kindName: '10km',
							// 	remark: 0,
							// 	id: 10000
							// }
						]
					},
					// {
					// 	kindName: '商圈',
					// 	remark: 0,
					// 	children: []
					// },
					// {
					// 	kindName: '热门地点',
					// 	remark: 0,
					// 	children: []
					// }
				],
				rightList2: [{
						kindName: '附近',
						remark: 1,
						id: ''
					},
					{
						kindName: '500m',
						remark: 0,
						id: 500
					},
					{
						kindName: '1km',
						remark: 0,
						id: 1000
					},
					{
						kindName: '3km',
						remark: 0,
						id: 3000
					},
					{
						kindName: '5km',
						remark: 0,
						id: 5000
					},
					{
						kindName: '10km',
						remark: 0,
						id: 10000
					}
				],
				rightList: [{
					kindName: '全部分类',
					remark: 1,
					id: ''
				}, ],
				sortList: [{
						title: '智能排序',
						choose: 1,
						value: ''
					},
					{
						title: '距离优先',
						choose: 0,
						value: 1
					},
					{
						title: '销量优先',
						choose: 0,
						value: 2
					}
				],
				shoppingList: [],
				title1: '全部分类',
				title2: '附近',
				title3: '智能排序',
				// FormData:{
				// 	pType: '', //商品类型一级id
				// 	goodType: '', //商品类型id
				// 	sortWay: '', //排序方式
				// 	type: 0, //0团购  1车主服务
				// 	longitude: '',
				// 	latitude: '',
				// },
				pType: '', //商品类型一级id
				goodType: '', //商品类型id
				sortWay: '', //排序方式
				type: 0, //0团购  1车主服务
				longitude: '',
				latitude: '',
				distance: '', //距离
				area: '', //地区
			}
		},
		onLoad(option) {
			this.type = option.type || 0
			// this.getGoodsBytype(this.goodType, this.sortWay, this.type, this.longitude, this.latitude)
			if (this.type == 1) {
				this.getGoodsList(1)
			} else {
				this.getGoodsList(0)
			}
			if (this.type == 0) {
				this.getBanners(7)
			} else if (this.type == 1) {
				this.getBanners(8)
			} else {
				this.getBanners(9)
			}
			this.getAddrTree()
		},
		onShow() {
			//   wx请求获取位置权限
			// this.getAuthorize()
			// 	.then(() => {
			// 		//   同意后获取
			// 		console.log('同意获取位置');
			// 		this.getLocationInfo();
			// 	})
			// 	.catch(() => {
			// 		//   不同意给出弹框，再次确认
			// 		this.openConfirm()
			// 			.then(() => {
			// 				this.getLocationInfo();
			// 			})
			// 			.catch(() => {
			// 				this.rejectGetLocation();
			// 			});
			// 	});

			// 检查是否已授权地理位置权限
			const _this  = this
			uni.getSetting({
			  success(res) {
				console.log(res, 'getSetting')
			    if (!res.authSetting['scope.userLocation']) {
			      // 未授权，需要进行授权
			      uni.authorize({
			        scope: 'scope.userLocation',
			        success() {
			          // 用户已同意授权地理位置信息
			          console.log('地理位置授权成功');
			          // 可以在这里调用获取地理位置的API
					  _this.getLocationInfo()
			        },
			        fail() {
			          // 用户拒绝授权地理位置信息
			          uni.showModal({
			            title: '提示',
			            content: '此功能需要获取您的地理位置信息，请确认授权',
			            success: function(modalRes) {
			              if (modalRes.confirm) {
			                // 引导用户去设置中开启权限
			                uni.openSetting();
			              } else if (modalRes.cancel) {
						  	_this.rejectGetLocation()
						  }
			            }
			          });
			        }
			      });
			    } else if (res.authSetting['scope.userLocation']) {
			      // 已授权，可以直接调用获取地理位置的API
			      _this.getLocationInfo()
			    }
			  }
			});
		},
		mounted() {
			// setTimeout(() => {
			// 	console.log(this.longitude, this.latitude, 789);
			// 	this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this
			// 		.latitude, this.distance, this.area)
			// }, 1000)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			return {
				title: '质美价廉，精选好店',
				path: '/groupPurchase/xstg/index?type=0',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onReachBottom() {
			// console.log("到底了");
			if (this.lastPage) {
				this.pageNum += 1
				this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this.latitude, this
					.distance, this.area)
			}
		},
		filters: {
			toFixed2(val) {
				return Number(val).toFixed(2)
			}
		},
		methods: {
			async getGoodsList(isCar) { //获取所有商品分类
				let res = await getGoodsList({
					isCar
				})
				if (res.code == 200) {
					// this.leftList = res.data
					this.leftList = this.leftList.concat(res.data)
					// this.rightList = res.data[0].children
				}
			},
			async getAddrTree() {
				let res = await getAddrTree()
				if (res.code == 200) {
					// this.leftList2 = this.leftList2.concat(res.data)
				}
			},
			async getGoodsBytype(pType = '', goodType, sortWay, type, longitude, latitude, distance, area) {
				let res = await getGoodsListbytype({
					pType,
					goodType,
					sortWay,
					type,
					longitude,
					latitude,
					distance,
					area,
					pageSize: 3,
					pageNum: this.pageNum
				})
				if (res.code == 200) {
					console.log(res.data, 'res.data')
					this.lastPage = res.lastPage
					this.shoppingList = this.shoppingList.concat(res.data)
					let tempObject = {}
					this.shoppingList = this.shoppingList.reduce((item, next) => {
						// item为没有重复id的数组，next为当前对象
						tempObject[next.id] ? '' : (tempObject[next.id] = true && item.push(next));
						return item;
					}, [])
					this.shoppingList = this.shoppingList.map(item => {
						return {
							...item,
							tags: item.goodEmployValues ? item.goodEmployValues.split(',') : []
						}
					})
					this.shoppingList.forEach(item => {
						if (item.goodsSeckill) {
							// let endTime = item.goodsSeckill.endDate + ' ' + item.goodsSeckill.endTime
							let endTime = getNowFormatDate() + ' ' + item.goodsSeckill.endTime
							let nowTimes = new Date().getTime()
							let endTimes = new Date(endTime).getTime()
							item.goodsSeckill.downTimes = endTimes - nowTimes
						}
					})
				}
			},
			togroupdetail(id) {
				uni.navigateTo({
					url: '/groupPurchase/detail/index?id=' + id
				})
			},
			async getBanners(affiliation) {
				uni.showLoading({
					mask: true
				})
				const res = await getBanners({
					affiliation
				})
				if (res.code == 200) {
					this.ban = res.data[0]
				}
				uni.hideLoading()
			},
			// async getBanners2() {
			// 	uni.showLoading({
			// 		mask: true
			// 	})
			// 	const res = await getBanners({
			// 		affiliation: '8'
			// 	})
			// 	if (res.code == 200) {
			// 		this.ban = res.data[0]
			// 	}
			// 	uni.hideLoading()
			// },
			tab(type) {
				this.show = true
				// if (this.activeType == type) {
				// 	this.activeType = 0
				// } else {
				// 	this.activeType = type
				// }
				this.activeType = type
				// if (this.activeType == 2) {
				// 	this.rightList2 = this.leftList2[0].children
				// }
			},
			close() {
				this.show = false
			},
			leftClick(item) {
				// this.rightList = item.children
				if (item.kindName == '全部') {
					this.rightList = [{
						kindName: '全部分类',
						remark: 1,
						id: ''
					}]
				} else {
					this.rightList = [{
						kindName: '全部' + item.kindName,
						remark: 0,
						id: ''
					}]
				}
				this.rightList = this.rightList.concat(item.children)
				this.leftList.forEach(item => {
					item.remark = 0
				})
				item.remark = 1
				this.pType = item.id
			},
			rightClick(item) {
				const tempList = this.rightList.filter(item => item != undefined)
				console.log(item, this.rightList, tempList, this.pType, 'this.rightList')
				tempList.forEach(item => {
					item.remark = 0
				})
				item.remark = 1
				this.title1 = item.kindName
				this.goodType = item.id
				this.pageNum = 1
				this.shoppingList = []
				this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this.latitude, this
					.distance, this.area)
				this.show = false
				this.activeType = 0
			},
			leftClick2(item) {
				this.rightList2 = item.children
				this.leftList2.forEach(item => {
					item.remark = 0
				})
				item.remark = 1
			},
			rightClick2(item) {
				this.rightList2.forEach(item => {
					item.remark = 0
				})
				item.remark = 1
				this.title2 = item.kindName
				if (item.isArea == 1) {
					this.area = item.kindName
				} else {
					this.distance = item.id
				}
				// this.goodType = item.id
				this.pageNum = 1
				this.shoppingList = []
				this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this.latitude, this
					.distance, this.area)
				this.show = false
				this.activeType = 0
			},
			sortClick(item) {
				this.sortList.forEach(item => {
					item.choose = 0
				})
				item.choose = 1
				this.title3 = item.title
				this.sortWay = item.value
				this.pageNum = 1
				this.shoppingList = []
				this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this.latitude, this
					.distance, this.area)
				this.show = false
				this.activeType = 0
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				console.log('进入getLocationInfo方法')
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						console.log(res, 456789)
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						that.address = res.address;
						// console.log("获取当前的用户经度", that.longitude);
						// console.log("获取当前的用户纬度", that.latitude);
						var long = 0;
						var lat = 0;
						//小数点保留六位  经度
						if (that.longitude.toString().indexOf('.') > 0) {
							const longlatsplit = that.longitude.toString().split('.');
							if (longlatsplit.length >= 2) {
								long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat(
									"." + longlatsplit[1].slice(0, 6));
							}
						}
						if (that.latitude.toString().indexOf('.') > 0) {
							const longlatsplit1 = that.latitude.toString().split('.');
							if (longlatsplit1.length >= 2) {
								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat(
									"." + longlatsplit1[1].slice(0, 6));
							}
						}
						that.getGoodsBytype(that.pType, that.goodType, that.sortWay, that.type, that.longitude,
							that
							.latitude, that.distance, that.area)
					},
					fail: function (err) {
						console.log(err, 999999)
						 let system = uni.getSystemInfoSync();
						 console.log(system.locationEnabled, '手机gps定位服务')
						// 用户拒绝授权或未开启定位
						  uni.showModal({
							title: '提示',
							content: '此功能需要获取您的位置信息，请开启手机定位服务,再重新进此页面',
							success: function (modalRes) {
							  if (modalRes.confirm) {
								// 引导用户去设置中开启定位服务
								
							  } else {
								  that.rejectGetLocation()
							  }
							}
						  });
					}
				});
				// this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this.latitude, this
				// 	.distance, this.area)
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "你的位置将用于小程序展示与门店的距离",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting().then((res) => {
									console.log(res, 'resss')
									if (res[1].authSetting["scope.userLocation"] === true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});
							} else if (res.cancel) {
								reject();
							}
						},
					});
					// uni.showModal({
					//   title: '提示',
					//   content: '此功能需要获取您的位置信息，请确认授权',
					//   success: function (modalRes) {
					// 	if (modalRes.confirm) {
					// 	  // 引导用户到设置页
					// 	  uni.openSetting();
					// 	}
					//   }
					// });
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "您拒绝了授权，无法为您提供距离显示服务",
					icon: "none",
					duration: 2000,
				});
				this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this.latitude, this
					.distance, this.area)
			},
			
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.bottomsafe {
		height: 60rpx;
		background-color: #fff;
		display: flex;
		border-radius: 0 0 38rpx 38rpx;

		.safe_left {
			width: 270rpx;
			background-color: #f4f4f4 !important;
			border-radius: 0 0 0 38rpx;
		}

		.safe_right {
			flex: 1
		}
	}

	.u-safe-area-inset-bottom {
		padding: 0;
	}

	page {
		background-color: #FFF1F1;
	}

	.ban-logo {
		position: absolute;
		top: 47%;
		left: 50rpx;
	}

	.content-box {
		margin-top: -80rpx;
	}

	.box_shadow {
		box-shadow: 0 10rpx 16rpx -10rpx #c1bfb4;
	}

	.scroll-X {
		white-space: nowrap;
	}

	.menu-item {
		padding: 20rpx 0 10rpx 0rpx;
		margin-right: 40rpx;
		display: inline-block;
	}

	.active {
		border-bottom: 8rpx solid #FFDE6D;
	}

	.menu-item:last-child {
		margin-right: 0;
	}

	.boxone {
		width: 212rpx;
		height: 62rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.contentbox {
		// padding: 30rpx;
		// box-sizing: border-box;
		// margin-top: 100rpx;
		min-height: 600rpx;
		position: relative;
	}

	.left {
		width: 270rpx;
	}

	.right {
		flex: 1;
		background-color: #fff;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.item_box {
		height: 100rpx;
		line-height: 100rpx;
		text-indent: 30rpx;
		font-size: 26rpx;
	}

	.active_left_first {
		background-color: #fff;
		color: #FF7F1C;
		width: 270rpx;
		position: relative;
	}

	.active_left {
		background-color: #fff;
		color: #FF7F1C;
		width: 270rpx;
		position: relative;
	}

	.active_left:first-of-type::after {
		content: "";
		display: none;
	}

	.active_left:first-of-type::before {
		content: "";
		display: none;
	}

	.active_left::after {
		content: "";
		height: 20rpx;
		width: 10%;
		background-color: #fff;
		position: absolute;
		top: -20rpx;
		right: 0;

	}

	.active_left::before {
		content: "";
		height: 20rpx;
		width: 100%;
		border-radius: 0 0 12px 0;
		background-color: #f4f4f4;
		position: absolute;
		top: -20rpx;
		left: 0;
		z-index: 1;
	}

	.active_left2 {
		position: relative;
	}

	.active_left2::after {
		content: "";
		height: 20rpx;
		width: 10%;
		background-color: #fff;
		position: absolute;
		bottom: -20rpx;
		right: 0;

	}

	.active_left2::before {
		content: "";
		height: 20rpx;
		width: 100%;
		border-radius: 0 12px 0 0;
		background-color: #f4f4f4;
		position: absolute;
		bottom: -20rpx;
		left: 0;
		z-index: 1;

	}

	.active_right {
		color: #FF7F1C;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.active_boxone {
		background-color: #FFF6D9;
		color: #FF7F1C;
		border: 1px solid #FF7F1C;
	}

	.tuangou {
		width: 688rpx;
		min-height: 335rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		margin-top: 20rpx;
		position: relative;
		.sub-title {
			padding-left: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/*! autoprefixer: off */
			-webkit-box-orient: vertical;

		}
	}

	.box_bot {
		width: 381rpx;
		height: 110rpx;
		border-radius: 42rpx;
		background: #FFF6F0;
		padding: 20rpx 0;
		box-sizing: border-box;
		position: relative;

		.box_bot_right {
			// width: 124rpx;
			height: 110rpx;
			border-radius: 0 42rpx 42rpx 0;
			// background: #FF7C16;
		}
	}

	.bgcontent {
		background-color: #F4F4F4;
		padding: 0;
		margin: 0 !important;
		width: 100%;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.ms_djs {
		width: 227rpx;
		height: 73rpx;
		background-color: #FFDE6D;
		border-radius: 0 0 15rpx 15rpx;
		margin-top: -10rpx;
	}
</style>